<template>
  <n-page-header :subtitle="setting.account + '的回忆录'">
    <n-carousel autoplay>
      <template
        v-for="(src, index) in carouselImg"
        :key="index"
      >
        <img
          class="carousel-img"
          :src="src"
        />
      </template>
      <!--      <img-->
      <!--        class="carousel-img"-->
      <!--        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"-->
      <!--      />-->
      <!--      <img-->
      <!--        class="carousel-img"-->
      <!--        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"-->
      <!--      />-->
      <!--      <img-->
      <!--        class="carousel-img"-->
      <!--        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"-->
      <!--      />-->
      <!--      <img-->
      <!--        class="carousel-img"-->
      <!--        src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"-->
      <!--      />-->
    </n-carousel>
    <template #title>
      <a style="text-decoration: none; color: inherit">MEMORY LOG</a>
    </template>
    <template #avatar>
      <n-avatar
        round
        src="https://cdnimg103.lizhi.fm/user/2017/02/04/2583325032200238082_160x160.jpg"
      />
    </template>
  </n-page-header>
  <n-divider />
  <!--  {{allMemoryIds}}{{surfaceSetting.memoryChooseLifeResults}}{{surfaceSetting.memoryChooseTaskResults}}{{choose}}-->
  <!--  {{timestampToDateTime(choose.range[0])}}{{choose.range}}-->
  <!--  {{timestampToDateTime(choose.range[1])}}-->
  <!--  {{ choose }}{{ stageList.getStageSelectOptions(fieldTree.getFieldDataById(choose.chooseField)) }}-->
  <!--  {{ taskList.getTaskSelectOptions(stageList.getStageDataById(choose.chooseStage)) }}-->
  <n-grid
    x-gap="12"
    :cols="2"
  >
    <n-gi>
      时间范围选择<n-date-picker
        v-model:value="choose.range"
        type="monthrange"
      />
    </n-gi>
    <n-gi>
      <IdMultilSelect v-model="choose"></IdMultilSelect>
    </n-gi>
  </n-grid>
  <template v-if="showMemoryList.length !== 0">
    <template
      v-for="(data, index) in showMemoryList"
      :key="index"
    >
      <!--            {{index}}-{{data}}-->
      <MemoryItem :data="data"></MemoryItem>
      <n-divider />
    </template>
  </template>
  <template v-else>
    <n-empty
      size="large"
      description="暂无回忆记录"
      class="empty"
    >
    </n-empty>
    <n-divider />
  </template>
  <n-space justify="end">
    <n-pagination
      v-model:page="page"
      :page-count="pageCount"
    />
  </n-space>
  <TaskLogEditDrawer v-model="editSettings"></TaskLogEditDrawer>
</template>

<script lang="ts" setup>
import IdMultilSelect from "@/components/common/idMultilSelect.vue";
import MemoryItem from "@/components/memory/MemoryItem.vue";
import TaskLogEditDrawer from "@/components/operation/taskLogList/taskLogListBtn/TaskLogEditDrawer.vue";
import { TaskLogData } from "@model/TaskLogMap";
import UseCacheIdStatMap from "@pinias/UseCacheIdStatMap";
import UseCacheMemory from "@pinias/UseCacheMemory";
import UseCacheTaskLog from "@pinias/UseCacheTaskLog";
import UseSetting from "@pinias/UseSetting";
import UseSurfaceSetting from "@pinias/UseSurfaceSetting";
import pinia from "@pinias/pinia";
import { computeRangeMonth } from "@utils/DateUtils";
import { picPath } from "@utils/pathUtils";
import { addMonths } from "date-fns/esm";
import { NDivider } from "naive-ui";
import { computed, onMounted, provide, reactive, ref, watch } from "vue";

// 全局数据
const { getSurfaceSetting } = UseSurfaceSetting(pinia);
const surfaceSetting = getSurfaceSetting();
const { getCacheMemory } = UseCacheMemory(pinia);
const cacheMemory = getCacheMemory();
const { getCacheTaskLogMap } = UseCacheTaskLog(pinia);
const cacheTaskLogMap = getCacheTaskLogMap();
const { getCacheIdStatMap } = UseCacheIdStatMap(pinia);
const cacheIdStatMap = getCacheIdStatMap();
const { getSetting, getFileFullPath } = UseSetting();
const setting = getSetting();

// 编辑单独回忆数据
const editSettings = reactive<{
  toEdit: boolean;
  toDelete: boolean;
  toDealRowId: string | undefined;
  toRecord: boolean;
}>({
  toEdit: false,
  toDelete: false,
  toDealRowId: undefined,
  toRecord: false,
});
provide("editSettings", editSettings);

// 页面数据
// const message = useMessage();
const carouselImg = ref(new Array<string>());
const page = ref(1);
const pageDieved = 3;
const pageCount = computed(() => {
  const num = allMemoryIds.value.length;
  return Math.ceil(num / pageDieved);
});
const choose = reactive<{
  chooseTaskResults: Array<number>;
  chooseLifeResults: Array<number>;
  hasFinish: boolean;
  toEdit: boolean;
  range: [number, number];
  multiple: boolean;
  cascade: boolean;
}>({
  chooseTaskResults: [...surfaceSetting.memoryChooseTaskResults],
  chooseLifeResults: [...surfaceSetting.memoryChooseLifeResults],
  hasFinish: true,
  toEdit: false,
  multiple: true,
  range: [addMonths(new Date().getTime(), -1).valueOf(), new Date().getTime()],
  cascade: true,
});
// 获取页面数据
const showMemoryList = ref(new Array<TaskLogData>());
const allMemoryIds = ref(new Array<string>());
const getAllMemoryIds = async () => {
  const idList = [...surfaceSetting.memoryChooseLifeResults, ...surfaceSetting.memoryChooseTaskResults];
  const monthRage = computeRangeMonth(choose.range[0], choose.range[1]);
  // console.log(idList,monthRage)
  if (idList.length === 0) {
    const taskLogIds = await cacheMemory.getMemory4MonthList(monthRage);
    return [...taskLogIds].reverse();
  } else {
    const taskLogIds = await cacheIdStatMap.getMemory4MonthList(monthRage, idList);
    return [...taskLogIds].reverse();
  }
};
const getMemoryLogs = async (page: number, pageCount: number) => {
  const showMemoryIds = allMemoryIds.value.slice((page - 1) * pageCount, page * pageCount);
  const result = new Array<TaskLogData>();
  for (const showMemoryId of showMemoryIds) {
    const taskLogData = await cacheTaskLogMap.getTaskLogData(showMemoryId);
    if (taskLogData !== undefined) {
      result.push(taskLogData);
    }
  }
  return result;
};
watch(choose, async () => {
  if (!choose.toEdit) {
    surfaceSetting.memoryChooseLifeResults = [...choose.chooseLifeResults];
    surfaceSetting.memoryChooseTaskResults = [...choose.chooseTaskResults];
    allMemoryIds.value = await getAllMemoryIds();
    showMemoryList.value = await getMemoryLogs(page.value, pageDieved);
  }
});
watch(page, async () => {
  showMemoryList.value = await getMemoryLogs(page.value, pageDieved);
});
let key = surfaceSetting.memoryPanelKey;
watch(surfaceSetting, async () => {
  if (key !== surfaceSetting.memoryPanelKey) {
    console.log("key", key);
    showMemoryList.value = await getMemoryLogs(page.value, pageDieved);
    key = surfaceSetting.memoryPanelKey;
  }
});
onMounted(async () => {
  carouselImg.value = await getFileFullPath([...surfaceSetting.carouselImg], picPath);
  allMemoryIds.value = await getAllMemoryIds();
  showMemoryList.value = await getMemoryLogs(page.value, pageDieved);
});
</script>

<style scoped>
.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.empty {
  width: 100%;
  height: 350px;
}
</style>
